<template>
  <view>
    <view class="Popup" v-show="!isLogin && loginDialogShow">
      <view class="title">授权提醒</view>
      <view class="tip">请授权头像等信息，以便为您提供更好的服务</view>
      <view class="bottom u-flex">
        <view class="item" @click="closeDialog">随便逛逛</view>
        <!-- getUserInfo -->
        <button
          class="item"
          v-if="!isUserProfileMenu"
          open-type="getUserInfo"
          lang="zh_CN"
          @getuserinfo="getUserInfo"
        >
          去授权
        </button>
        <!-- getUserProfile -->
        <button v-if="isUserProfileMenu" @click="getProfile" class="item">去授权</button>
      </view>
    </view>
    <view class="mask" v-show="!isLogin && loginDialogShow" @click="closeDialog"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import * as api from '@/api/api';
export default {
  name: "login-dialog",
  props: {},
  data() {
    return {
      isUserProfileMenu: false // 是否支持getProfile获取用户
    }
  },
  computed: {
    ...mapState(["isLogin", "userInfo", "loginDialogShow"]),
  },
  created() {},
  mounted() {
    if (uni.getUserProfile) {
      this.isUserProfileMenu = true;
    }
  },
  methods: {
    // 以前获取用户
    getUserInfo(e) {
      uni.getUserInfo({
        provider: 'weixin',
        success: res => {
          let data = {};
          data.iv = res.iv;
          data.encryptedData = res.encryptedData;
          uni.login({
            provider: 'weixin',
              success: res1 => {
                data.code = res1.code;
                uni.showLoading({title: '正在授权'});
                this._authLogin(data);
              }
          })
        },
        fail: err => {
          uni.showToast({title: '已取消', icon: 'success'});
          this.$store.commit('closeLoginDialog');
        }
      })
      
    },
    // 新版获取用户信息 encryptedData iv code
    getProfile() {
      let data = {
        code: '',
        encryptedData: '',
        iv: ''
      };
      uni.getUserProfile({
        desc: '获取你的昵称、头像、地区及性别',
        lang: 'zh_CN',
        provider: 'weixin',
        success: res => {
          data.iv = res.iv;
          data.encryptedData = res.encryptedData;
          uni.login({
            provider: 'weixin',
            success: res1 => {
              data.code = res1.code;
              uni.showLoading({title: '正在授权'});
              this._authLogin(data);
            }
          })
        },
        fail: err => {
          uni.showToast({title: '已取消', icon: 'success'});
          this.$store.commit('closeLoginDialog');
        }
      })
    },
    // 授权登录
    async _authLogin(data) {
      try {
        const {data: res} = await api.userLogin(data);
        this.$store.commit('saveUserInfo', res.data);
        this.$store.commit('saveUserToken', res.data.token);
        this.$store.commit('closeLoginDialog');
        this._saveLoginInfoToStorage(res.data);
        uni.hideLoading();
        uni.showToast({title: '登录成功', icon: 'success'});
      } catch (e) {
        if (e && e.response) {
          uni.showToast({title: '登录异常', icon: 'error'});
        }
      }
    },
    // 本地存储登录信息
    _saveLoginInfoToStorage(data) {
      uni.setStorageSync('userInfo', data);
      uni.setStorageSync('token', data.token);
      uni.setStorageSync('isLogin', true);
    },
    closeDialog() {
      this.$store.commit('closeLoginDialog');
    }
  }
};
</script>

<style lang="scss">
.Popup {
  width: 600rpx;
  border-radius: 5px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 320;

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #303133;
    text-align: center;
    margin-top: 48rpx;
  }

  .tip {
    text-align: center;
    padding: 40rpx 0 60rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: "#949494";
    padding: 40rpx 0 60rpx;
  }

  .bottom {
    border-top: 1rpx solid #f8f7fb;
    color: #000;
    display: flex;
    align-items: center;
    .item {
      width: calc(50% - 1rpx);
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      border-right: 2rpx solid #f8f7fb;
      font-size: 30rpx;
      font-weight: 500;
    }

    button {
      width: calc(50% - 1rpx);
      height: 100rpx;
      color: #3474df;
      line-height: 100rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: 500;
      background-color: #fff !important;
      border: none !important;
      box-sizing: border-box;
      margin: 0;

      &::after {
        border: none !important;
      }
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 310;
}
</style>
